Convert accessibility options unit tests to Vue Testing Library #5794#5889
Conversation
- covered all the original tests. - coverage includes user interaction tests.
|
👋 Hi @LightCreator1007, thanks for contributing! For the review process to begin, please verify that the following is satisfied:
Also check that issue requirements are satisfied & you ran Pull requests that don't follow the guidelines will be closed. Reviewer assignment can take up to 2 weeks. |
|
📢✨ Before we assign a reviewer, we'll turn on |
rtibblesbot
left a comment
There was a problem hiding this comment.
Clean VTL migration with real improvements over the original.
CI passing. No UI files changed — Phase 3 skipped. Screenshot and video confirm the Accessibility section in the Edit Details modal, matching what the tests cover.
- suggestion:
mockConstantsMixin = {}is a no-op — see inline - suggestion: audio test drops tooltip-absence assertion from original — see inline
- nitpick:
v-modelin describe block name — see inline - praise: semantic role queries and new interaction coverage — see inline
@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly
How was this generated?
Reviewed the pull request diff checking for:
- Correctness: bugs, edge cases, undocumented behavior, resource leaks, hardcoded values
- Design: unnecessary complexity, naming, readability, comment accuracy, redundant state
- Architecture: duplicated concerns, minimal interfaces, composition over inheritance
- Testing: behavior-based assertions, mocks only at hard boundaries, accurate coverage
- Completeness: missing dependencies, unupdated usages, i18n, accessibility, security
- Principles: DRY (same reason to change), SRP, Rule of Three (no premature abstraction)
- Checked CI status and linked issue acceptance criteria
- For UI changes: inspected screenshots for layout, visual completeness, and consistency
rtibblesbot
left a comment
There was a problem hiding this comment.
Prior findings
Resolved:
- Empty
mockConstantsMixininmixinsarray (suggestion) — removed entirely - Audio test missing
queryByTestId('tooltip-captionsSubtitles')absence assertion (suggestion) — added at line 88 'User Interactions and v-model'describe block name (nitpick) — simplified to'User Interactions'
3/3 prior findings resolved. 0 re-raised.
All three suggestions addressed cleanly. CI failures (JS Tests, Linting, Build) are a repo-wide infrastructure issue — pnpm requires Node.js ≥ 22.13 but CI runners are on v20.20.2; the Use Node.js step fails before any PR code runs. This is not caused by this PR.
- praise: interaction tests replaced
within(getByTestId(...)).getByRole('checkbox')with directgetByRole— see inline
@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly
How was this generated?
Compared the current PR state against findings from a prior review:
- Retrieved prior bot reviews deterministically via the GitHub API
- Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
- Only raised NEW findings for newly introduced code
- Reviewed the pull request diff checking for correctness, design, architecture, testing, completeness, and adherence to DRY/SRP principles
- Checked CI status and linked issue acceptance criteria
akolson
left a comment
There was a problem hiding this comment.
Hi @LightCreator1007! Great work on this pr, its looking good! I've left a few comments for your action. Thanks you!
| it('smoke test', () => { | ||
| const wrapper = shallowMount(AccessibilityOptions, { | ||
| propsData: { | ||
| const mockMetadataMixin = { |
There was a problem hiding this comment.
The mockMetadataMixin and $tr: key => key mock cause all queries to target translation key names ('altText', 'highContrast') instead of the strings users actually see ('Includes alternative text descriptions for images', 'Includes high contrast text for learners with low vision'). This violates the Kolibri unit testing guide's "Reference translation keys, not hardcoded strings" principle, and contradicts the acceptance criteria requirement to follow Testing Library principles — TL's core guideline is that tests should resemble how users interact with the app.
Neither mock is necessary. translateMetadataString calls metadataStrings.$tr() internally, which is a createTranslator instance that resolves to its _defaultMessages in test environments with no extra setup. Remove both mocks and query by the real translated strings:
import { metadataStrings } from 'shared/strings/metadataStrings';
// Instead of { name: /altText/i }:
screen.getByRole('checkbox', { name: metadataStrings.$tr('altText') });
// → 'Includes alternative text descriptions for images'
screen.getByRole('checkbox', { name: metadataStrings.$tr('highContrast') });
// → 'Includes high contrast text for learners with low vision'This also means the mocks: { $tr: key => key } block can be removed entirely.
| import AccessibilityOptions from '../AccessibilityOptions.vue'; | ||
| import { AccessibilityCategories } from 'shared/constants'; | ||
|
|
||
| beforeAll(() => { |
There was a problem hiding this comment.
configure({ testIdAttribute: 'data-test' }) should be called at module scope, not inside beforeAll. Jest can initialize parts of the test infrastructure before beforeAll runs, so testId queries that fire during module loading would miss the configuration. The afterAll restore is also risky — if a test throws before afterAll executes, data-testid is never restored, silently breaking other test files that run after this one.
Replace both blocks with a single module-scope call:
configure({ testIdAttribute: 'data-test' });| value: [], | ||
| ...props, | ||
| }, | ||
| routes: [], |
There was a problem hiding this comment.
routes: [] installs VueRouter with no routes. AccessibilityOptions doesn't use routing, so this can be removed.
|
|
||
| it('renders successfully', () => { | ||
| renderComponent(); | ||
| expect(screen.getAllByRole('checkbox').length).toBeGreaterThan(0); |
There was a problem hiding this comment.
This smoke test is made redundant by the 'shows document-specific accessibility options' test immediately below, which already renders the same default kind: 'document' case and asserts exactly 3 checkboxes. Consider removing it, or giving it a distinct purpose (e.g. asserting the component renders without throwing for an unknown kind).
Summary
vue-testing-library.getByRoleinstead ofgetByTestId).Screencast.From.2026-05-09.20-37-55.mp4
References
Closes #5794
Reviewer guidance
Run
pnpm test channelEdit/components/edit/__tests__/accessibilityOptions.spec.jsto test whether all 10 tests are passing or not.
Note on Tooltips: Tooltip elements currently seem to render as SVGs inside spans . So i thought of falling back to using getByTestId for the tooltip assertions.
AI usage
Code was adjusted, troubleshot and tested for bugs iteratively in collaboration with gemini and claude. Reviewed and audited to the best of my abilites to ensure integrity and correctness of code.